{% extends 'base.html' %}

{% block title %}我的评分 - 电影推荐系统{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">我的电影评分</h1>
    
    <div class="card">
        <div class="card-header bg-light">
            <div class="row align-items-center">
                <div class="col">
                    <h5 class="mb-0">评分历史</h5>
                </div>
                <div class="col-auto">
                    <div class="btn-group" role="group">
                        <a href="?sort=date" class="btn btn-outline-secondary btn-sm {% if sort_by == 'date' %}active{% endif %}">按日期</a>
                        <a href="?sort=rating" class="btn btn-outline-secondary btn-sm {% if sort_by == 'rating' %}active{% endif %}">按评分</a>
                        <a href="?sort=title" class="btn btn-outline-secondary btn-sm {% if sort_by == 'title' %}active{% endif %}">按标题</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            {% if user_ratings %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>电影</th>
                            <th>评分</th>
                            <th>评论</th>
                            <th>日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for rating in user_ratings %}
                        <tr>
                            <td>
                                <a href="{% url 'movie_detail' rating.movie.id %}" class="text-decoration-none">
                                    {{ rating.movie.title }} ({{ rating.movie.year }})
                                </a>
                            </td>
                            <td>
                                <div class="rating-stars">
                                    {% for i in "12345" %}
                                    <span class="star {% if forloop.counter <= rating.rating %}filled{% endif %}">★</span>
                                    {% endfor %}
                                </div>
                            </td>
                            <td>
                                {% if rating.comment %}
                                <span class="text-truncate d-inline-block" style="max-width: 200px;">{{ rating.comment }}</span>
                                {% else %}
                                <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>{{ rating.created_at|date:"Y-m-d" }}</td>
                            <td>
                                <a href="{% url 'movie_detail' rating.movie.id %}" class="btn btn-sm btn-outline-primary">编辑</a>
                                <button class="btn btn-sm btn-outline-danger delete-rating" data-id="{{ rating.id }}">删除</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            {% if user_ratings.has_other_pages %}
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center">
                    {% if user_ratings.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ user_ratings.previous_page_number }}&sort={{ sort_by }}">上一页</a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">上一页</span>
                    </li>
                    {% endif %}
                    
                    {% for i in user_ratings.paginator.page_range %}
                    <li class="page-item {% if user_ratings.number == i %}active{% endif %}">
                        <a class="page-link" href="?page={{ i }}&sort={{ sort_by }}">{{ i }}</a>
                    </li>
                    {% endfor %}
                    
                    {% if user_ratings.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ user_ratings.next_page_number }}&sort={{ sort_by }}">下一页</a>
                    </li>
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">下一页</span>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
            
            {% else %}
            <div class="alert alert-info text-center">
                <p>您还没有对任何电影进行评分。</p>
                <a href="{% url 'movie_list' %}" class="btn btn-primary mt-2">浏览电影并开始评分</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 确认删除对话框 -->
<div class="modal fade" id="deleteRatingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除这条评分吗？此操作无法撤销。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">删除</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 删除评分功能
    const deleteButtons = document.querySelectorAll('.delete-rating');
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteRatingModal'));
    const confirmDeleteBtn = document.getElementById('confirmDelete');
    let ratingIdToDelete = null;
    
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            ratingIdToDelete = this.dataset.id;
            deleteModal.show();
        });
    });
    
    confirmDeleteBtn.addEventListener('click', function() {
        if (ratingIdToDelete) {
            // 发送删除请求
            fetch(`/movies/ratings/${ratingIdToDelete}/delete/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // 刷新页面
                    window.location.reload();
                }
            });
            
            deleteModal.hide();
        }
    });
});
</script>
{% endblock %} 